/* 星星评分组件样式 */
.rating-container {
  --star-size: 20px;
  --star-gap: 10px;
  --active-color: #ffc107;
  --inactive-color: #f0f0f0;
  
  display: flex;
  justify-content: center;
  gap: var(--star-gap);
  padding: 0.5rem 0;
}

.star {
  position: relative;
  width: var(--star-size);
  height: var(--star-size);
  display: inline-block;
}

.star::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--inactive-color);
  border: 1px dashed #666;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  z-index: 1;
}

.star::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--active-color) 0% var(--fill-percent, 0%),
    transparent var(--fill-percent, 0%) 100%
  );
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  z-index: 9;
  transform: translate(-50%, -50%) scale(1.02);
  animation: pulseAndGlow 2s infinite ease-in-out;
}

@keyframes pulseAndGlow {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1.02);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.5);
  }
}

/* 响应式设计 */
@media (max-width: 500px) {
  .rating-container {
    --star-size: 16px;
    --star-gap: 6px;
  }
}

/* 可选：增加交互效果 */
.star:active {
  transform: scale(1.05);
}
